import React from 'react';
import PropTypes from 'prop-types';
import { inject, observer } from 'mobx-react';
import { BackTop, message, notification } from 'antd';
import Helmet from 'react-helmet'

import NewsDetail from '../store/news_detail'
import User from '../store/user_store'

import MobileHeder from './mobile_header';
import MobileFooter from './mobile_footer';
import CommComments from './comm_comments';

import { post } from '../util/comm';
import { collectionUrl } from '../util/constant';

@inject((stores) => {
  const store = {
    newsDetail: stores.newsDetail,
    userStore: stores.userStore,
  }
  return store
})

@observer
class MobileNewsDetail extends React.Component {
  constructor() {
    super();
    this.state = {
    }
    this.collect = this.collect.bind(this)
  }
  componentDidMount() {
    this.getNewsDetail(this.props.match.params.newsId)
  }
  // 获取新闻详情
  getNewsDetail() {
    this.props.newsDetail
      .getDetailNews(this.props.match.params.newsId).catch(e => message.error(e))
  }
  // 整理数据
  filter(data) {
    return {
      __html: data,
    }
  }
  // 添加收藏功能函数
  collect() {
    const param = {
      newsId: this.props.match.params.newsId,
      userId: this.props.userStore.userInfo.id,
    };
    if (!param.userId) {
      notification.error({
        message: '小白新闻提醒',
        description: '请先登录',
      })
      return;
    }
    // 用户已登录并且文章存在才能评论
    if (param.newsId && param.userId) {
      post(collectionUrl, param).then((res) => {
        if (res.status === 200) {
          if (res.data.code === 1) {
            notification.success({
              message: '小白新闻提醒',
              description: '收藏该文章成功',
            })
          } else if (res.data.code === 10) {
            this.props.userStore.clearUserInfo();
            notification.error({
              message: '小白新闻提醒',
              description: '请登陆后再进行收藏',
            })
          } else {
            message.error(res.data.message);
          }
        } else {
          message.error(res.data.message);
        }
      })
    }
  }
  asyncBootstrap() {
    return new Promise((resolve) => {
      this.props.newsDetail
        .getDetailNews(this.props.match.params.newsId)
        .then(() => resolve(true))
    })
  }
  render() {
    const id = this.props.match.params.newsId;
    const news =
      this.props.newsDetail.newsDetailData.get(id)
        ? this.props.newsDetail.newsDetailData.get(id).data : {}
    const { isLoading } = this.props.newsDetail
    return (
      <div id="mobile">
        <div className="news-detail">
          <MobileHeder />
          <Helmet>
            <title>{news.title}</title>
          </Helmet>
          { !isLoading ?
            <div className="main">
              <h1 className="title">{news.title}</h1>
              <div className="handle-article">
                <span className="collect" onClick={this.collect}>
                  +收藏该文章
                </span>
                <span className="src">
                  来源:{news.src}
                </span>
                <span className="time">
                  时间:{news.time}
                </span>
              </div>
              <div className="news-detail-content" dangerouslySetInnerHTML={this.filter(news.content)} />
              <CommComments newsId={-(0 - id)} pageSize={15} />
            </div>
            :
            <div className="loading">
              加载中...
            </div>
        }
          <MobileFooter />
        </div>
        <BackTop />
      </div>
    )
  }
}
export default MobileNewsDetail;

MobileNewsDetail.propTypes = {
  match: PropTypes.objectOf(Object),
  newsDetail: PropTypes.instanceOf(NewsDetail),
  userStore: PropTypes.instanceOf(User),
}
